<template>
  <div class="params-container">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/home/params' }"> 分类参数 </el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-alert title="注意: 只允许为第三级分类设置参数 !" type="warning" :closable="false"> </el-alert>
      <!-- 级联选择器 -->
      <div class="selectCategory">
        <span>选择商品分类: </span>
        <el-cascader v-model="selectedIds" :options="categoryList" :props="props" @change="handleChange"></el-cascader>
      </div>
      <!-- tab -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="动态参数" name="many">
          <el-button type="primary" :disabled="isDisable" style="margin-bottom: 20px" @click="dialogVisible = true">添加参数</el-button>
          <el-table :data="manyData" style="width: 100%" border stripe>
            <!-- 展开列 -->
            <el-table-column type="expand">
              <template slot-scope="scope">
                <el-tag v-for="(item, index) in scope.row.attr_vals" :key="index">{{ item }}</el-tag>
              </template>
            </el-table-column>
            <!-- 索引列 -->
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column prop="attr_name" label="参数名称" width="500"> </el-table-column>
            <el-table-column>
              <template>
                <el-table-column label="操作">
                  <el-button class="el-icon-edit" type="primary" size="mini">修改</el-button>
                  <el-button class="el-icon-delete" type="danger" size="mini">删除</el-button>
                </el-table-column>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="静态属性" name="only">
          <el-button type="primary" :disabled="isDisable" style="margin-bottom: 20px" @click="dialogVisible = true">添加属性</el-button>
          <el-table :data="onlyData" style="width: 100%" border stripe>
            <!-- 展开列 -->
            <el-table-column type="expand">
              <template slot-scope="scope">
                <el-tag v-for="(item, index) in scope.row.attr_vals" :key="index">{{ item }}</el-tag>
              </template>
            </el-table-column>
            <!-- 索引列 -->
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column prop="attr_name" label="参数名称" width="500"> </el-table-column>
            <el-table-column>
              <template>
                <el-table-column label="操作">
                  <el-button class="el-icon-edit" type="primary" size="mini">修改</el-button>
                  <el-button class="el-icon-delete" type="danger" size="mini">删除</el-button>
                </el-table-column>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

      <!-- 点击添加按钮弹框 -->
      <el-dialog :title="'添加' + addName" :visible.sync="dialogVisible" width="60%">
        <el-form v-model="addFromParams">
          <el-form-item label="参数名">
            <el-input v-model="addFromParams.attr_name"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addDtParams">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'params',
  data() {
    return {
      // 存放级联数据
      categoryList: [],
      // 选中的级联选项id
      selectedIds: [],
      props: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children',
        // 悬浮触发
        expandTrigger: 'hover',
        checkStrictly: true,
      },
      // 默认tab页的选中项
      activeName: 'many',
      // 选中的级联项id
      paramId: '',
      // 存放动态参数
      manyData: [],
      // 存放静态属性
      onlyData: [],
      dialogVisible: false,
      // 添加动态参数表单数据
      addFromParams: {
        attr_name: '',
      },
    }
  },
  methods: {
    // 获取商品分类数据
    async getCategoryList() {
      const { data } = await this.$http.get('categories', {
        params: {
          type: 3,
          pagenum: 1,
          pagesize: 100,
        },
      })
      this.categoryList = data.data.result
    },
    // 级联改变触发的事件
    handleChange() {
      this.getParamsById()
    },
    // 切换tab触发的事件
    handleClick() {
      this.getParamsById()
    },
    async getParamsById() {
      // 如果选中的不是第三个级别 就将id数组置空
      if (this.selectedIds.length < 3) {
        this.selectedIds = []
        return
      } else {
        // 证明选中的是第三级
        this.paramsId = this.selectedIds[this.selectedIds.length - 1]

        // 发起请求
        const { data } = await this.$http.get(`categories/${this.paramsId}/attributes`, {
          params: {
            sel: this.activeName,
          },
        })
        // 对获取到的数据进行二次处理
        data.data.forEach((item) => {
          // 得到的数据: '49吋4K超薄曲面 人工智能,55吋4K观影曲面 30核HDR,55吋4K超薄曲面'
          item.attr_vals = item.attr_vals.split(' ')
          // 处理完后的数据: ['49吋4K超薄曲面', '人工智能,55吋4K观影曲面', '30核HDR,55吋4K超薄曲面']
        })
        // 动态参数的数据
        if (this.activeName == 'many') {
          this.manyData = data.data
        } else {
          // 静态属性的数据
          this.onlyData = data.data
        }
      }
    },
    async addDtParams() {
      // 分类id
      await this.$http.post(`categories/${this.paramsId}/attributes`, {
        attr_name: this.addFromParams.attr_name,
        attr_sel: this.activeName,
      })
      // 重新刷新页面
      this.getParamsById()
      this.dialogVisible = false
    },
  },
  computed: {
    // 当选中级联第三级时 让按钮能够使用
    isDisable() {
      return this.selectedIds.length == 3 ? false : true
    },
    addName() {
      return this.activeName == 'many' ? '动态参数' : '静态属性'
    },
  },
  created() {
    this.getCategoryList()
  },
}
</script>

<style lang="less">
.el-breadcrumb {
  margin-bottom: 20px;
}
.selectCategory {
  margin: 20px 0;
}
.el-cascader-panel .el-radio {
  width: 100%;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 0px;
  right: 10px;
}
.el-cascader-node__label {
  width: 157px;
}
.el-cascader-panel .el-radio__input {
  visibility: hidden;
}
.el-cascader-panel .el-cascader-node__postfix {
  top: 10px;
}
.el-tag:first-child {
  margin-left: 46px;
}
.el-tag {
  margin-left: 15px;
}
</style>
